<template>
  <div class="bjx-main" style="background-color: #f6f9fa">
    <!--轮播图-->
    <div class="bjx-carousel" style="position: relative">
      <el-carousel height="528px">
        <el-carousel-item v-for="banner in bannerArr"><img :src="banner.image" style="width: 100%;height: 100%">
        </el-carousel-item>
        <span style="width: 432px;
              height: 143px;
              top: 50%;
              left: 50%;
              margin-top: -125px;
              margin-left: -197px;
              position: absolute;
                  "><img src="https://www.atzuche.com/static/media/slogan.5875ae96.png"
                         style="width: 100%;height: 100%"></span>
      </el-carousel>
    </div>
    <!--图下小方块  -->
    <div class="bjx-banners"
         style="z-index: 9;position: relative;width: 1024px;height: 96px;margin: 0 auto;margin-bottom: 64px">
      <div class="bjx-banners-1" style="display: flex;height: 96px;margin: -48px -8px 64px">
        <div class="scale"><a  style="float: left;"><img src="https://cdn.atzuche.com/pc/subbanner/banner9.png"
                                                                 style="width: 244px;height: 96px;border-radius: 10px;margin:0 8px"></a>
        </div>
        <div class="scale"><a style="float: left;"><img src="https://cdn.atzuche.com/pc/subbanner/banner2.jpg"
                                                                 style="width: 244px;height: 96px;border-radius: 10px;margin:0 8px"></a>
        </div>
        <div class="scale"><a  style="float: left;"><img src="https://cdn.atzuche.com/pc/subbanner/banner3.jpg"
                                                                 style="width: 244px;height: 96px;border-radius: 10px;margin:0 8px"></a>
        </div>
        <div class="scale"><a  style="float: left;"><img src="https://cdn.atzuche.com/pc/subbanner/banner10.png"
                                                                 style="width: 244px;height: 96px;border-radius: 10px;margin:0 8px"></a>
        </div>
      </div>
    </div>
    <!-- 业务数据   -->
    <div class="bjx-basedata" style="height: 240px;text-align: center">
      <ul style="list-style: none;height: 240px;margin-left: -35px;display: flex;justify-content: center;overflow: hidden">
        <li style="box-sizing: border-box;;width: 244px;height: 240px;float: left;background-color: #fff;margin: 0 8px;padding: 24px;">
          <div style="text-align: justify;margin-top: -18px"><h3><span class="s_class">300</span></h3>
            <p style="font-size: 13px;color: #3c3c5a99;margin-top: -15px;">业务覆盖近<span
                style="color: #00cf97">300</span>个城市</p></div>
          <div style="margin-right: -74px;margin-top: 30px;"><img
              src="https://www.atzuche.com/static/media/bg-superiority-1.050cee88.png"
              style="width: 140px;height: 100px"></div>
        </li>
        <li style="box-sizing: border-box;;width: 244px;height: 240px;float: left;background-color: #fff;margin: 0 8px;padding: 24px;">
          <div style="text-align: justify;margin-top: -18px"><h3><span class="s_class">20,000,000+</span></h3>
            <p style="font-size: 13px;color: #3c3c5a99;margin-top: -15px;">注册用户突破<span
                style="color: #00cf97">2000</span>个城市</p></div>
          <div style="margin-right: -74px;margin-top: 30px;"><img
              src="https://www.atzuche.com/static/media/bg-superiority-2.56c87b81.png"
              style="width: 140px;height: 100px"></div>
        </li>
        <li style="box-sizing: border-box;;width: 244px;height: 240px;float: left;background-color: #fff;margin: 0 8px;padding: 24px;">
          <div style="text-align: justify;margin-top: -18px"><h3><span class="s_class">10,000+</span></h3>
            <p style="font-size: 13px;color: #3c3c5a99;margin-top: -15px;">超全车型逾<span
                style="color: #00cf97">10000</span>款</p></div>
          <div style="margin-right: -74px;margin-top: 30px;"><img
              src="https://www.atzuche.com/static/media/bg-superiority-3.8cabe447.png"
              style="width: 140px;height: 100px"></div>
        </li>
        <li style="box-sizing: border-box;;width: 244px;height: 240px;float: left;background-color: #fff;margin: 0 8px;padding: 24px;">
          <div style="text-align: justify;margin-top: -18px"><h3><span class="s_class">300,000+</span></h3>
            <p style="font-size: 13px;color: #3c3c5a99;margin-top: -15px;">注册车辆超过<span
                style="color: #00cf97">30</span>万辆</p></div>
          <div style="margin-right: -74px;margin-top: 30px;"><img
              src="https://www.atzuche.com/static/media/bg-superiority-4.d14c1741.png"
              style="width: 140px;height: 100px"></div>
        </li>
      </ul>
    </div>
    <!--  租车服务-->
    <div class="bjx-rent-car-service" style="width: 1024px;height: 850px;margin: 0 auto;">
      <div style="height: 48px "><h2 style="font-size: 32px;color: #3c3c5a">租车服务</h2></div>
      <div>
        <div
            style="display: flex;flex-align: center;align-items: center;margin: 20px 0 32px;flex-pack: center;justify-content: center;">
          <a style="text-decoration: none" @click="rentTypeChange('1')">
            <div class="zc-button" :class="{'active': rentType==='1'}" style="margin: 0 8px">日租</div>
          </a>
          <a style="text-decoration: none" @click="rentTypeChange('2')">
            <div class="zc-button" :class="{'active': rentType==='2'}" style="margin: 0 8px">月租</div>
          </a>
          <a @click="router.push('/enterprise')" style="text-decoration: none">
            <div class="zc-button" style="margin: 0 8px">企业租车</div>
          </a>
        </div>
        <div>
          <div style="display: flex;flex-wrap: wrap;">
            <a @click="router.push('/short_rent')" class="zc-card" style="text-decoration: none; box-sizing: border-box;"
               v-for="item in carList">
              <div style="display: flex;justify-content: space-between;">
                <div style="color: #3c3c5a;font-size: 16px;line-height: 28px;">{{ item.vehicleType }}</div>
                <div style="display: flex" class="zc-price">
                  {{ item.dayRentPrice }}
                  <span style="font-size: 10px;line-height: 12px;padding: 0 2px;">元天</span>
                </div>
              </div>
              <div class="zc-picture"><img class="scale" :src="item.imgs" style="width: 100%"></div>
              <div>
                <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-left: 1px">
                  {{ item.suggestCar }}</p>
                <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-top: -10px">
                  {{ item.description }}</p>
              </div>
            </a>


          </div>
        </div>
      </div>

    </div>
    <!--热租品牌-->
    <div class="bjx-rent-car-brand" style="width: 1024px;height: 418px;margin: 0 auto;">
      <div style="height: 48px "><h2 style="font-size: 32px;color: #3c3c5a">热租品牌</h2></div>
      <div style="margin: 24px -8px">
        <a v-for="brand in brandArr" class="hot-row" @click="toShortRent(brand.id)">
          <img class="scale" :src="brand.img" style="width: 157px;height: 157px">
          <h2 class="zt">{{ brand.name }}</h2>
        </a>
      </div>
    </div>
    <!--  租车专题-->
    <div class="bjx-rent-subject" style="width: 1024px;height: 486px;margin: 0 auto;">
      <div style="height: 48px;"><h2 style="font-size: 32px;color: #3c3c5a">租车专题</h2></div>
      <div style="width: 1024px ;height: 414px;">
        <div style="display: flex;justify-content: space-between;">
          <a v-for="item in topicList" @click="router.push('/topic/'+item.id)"
             style="background-color: #ffffff;display: block;width: 244px;height: 318px;text-decoration: none;border-radius: 10px;overflow: hidden; cursor: pointer">
            <img :src="item.pic" style="width: 244px;height: 160px">
            <div
                style="text-align: left;vertical-align: baseline;padding: 0 16px;font-size: 16px;line-height: 22px;margin-bottom: 6px;color: #3c3c5a;">
              {{ item.topicTitle }}
            </div>
            <div class="zc-zt">{{ item.content }}</div>
          </a>
        </div>
        <a @click="router.push('/topic')" class="zc-more" style="cursor: pointer">查看更多专题 ></a>
      </div>

    </div>
    <!--  凹凸资讯-->
    <div class="bjx-news" style="width: 1024px;height: 536px;margin: 0 auto;">
      <div><h2 style="color: #3c3c5a;font-size: 32px">凹凸资讯</h2></div>
      <div style="width: 1024px ;height: 384px;display: flex;flex-wrap: wrap;justify-content: space-between;">
        <div v-for="item in newList" :key="item.id" style="display: flex;border-radius: 10px;width: 504px;height: 112px;background-color: #ffffff">
          <router-link :to="'/newsDetail/' + item.id" style="text-decoration: none;">
            <div style="display: flex;border-radius: 10px;width: 504px;height: 112px;background-color: #ffffff">
              <div style="width: 340px;font-size: 12px;line-height: 17px;margin-left: 16px;margin-right: 20px;color: rgba(60, 60, 90, .6);text-align: left;">
                <h2 style="font-size: 16px;line-height: 22px;margin-bottom: 6px;color: #3c3c5a;">{{ item.title }}</h2>
                <p style="margin-top: -1px;">{{ item.brief }}</p>
              </div>
              <div style="width: 114px;height: 80px;overflow: hidden;margin-top: 12px;border-radius: 6px">
                <img :src="item.imgUrl" style="width: 100%;">
              </div>
            </div>
          </router-link>
        </div>
      </div>
      <router-link :to="'/searchBy/categoryId/' + 0" style="text-decoration: none;">
        <span class="zc-more" style="padding: 20px">查看更多资讯 ></span>
      </router-link>

    </div>
    <!-- 热门城市 -->
    <div class="bjx-hot-city" style="margin: 0 auto;width: 1024px;padding-bottom: 80px;">
      <div style="height: 48px;"><h2 style="font-size: 32px;color: #3c3c5a">热门城市</h2></div>
      <div style="width: 1024px;height: 252px;">
        <div style="display: flex;justify-content: space-between;margin-top: 22px">
          <div style="width: 106px;height: 106px;" v-for="item in cityList">
            <a style="display: inline-block" :href="'/short_rent?cityId='+item.id">
              <img :src="item.image" style="border-radius: 10px;width: 100%;">
            </a>
            <p style="bottom: 14px;left: 16px;font-size: 14px;color: #fff;line-height: 22px;margin-top: -40px;text-align: center;">
              {{ item.name }}租车</p>
          </div>
        </div>
        <!--  查询城市按钮 -->
        <div>
          <div style="display: flex;margin-top: 32px">
            <el-button class="button" v-for="(val, key, i) in LetterCityList" @click="myclick(val)">{{ key }}
            </el-button>
          </div>
          <div style="display: inline-block;flex-wrap: wrap;margin-top: 18px" v-for="city in cityArr">
            <a class="hot-city" @click="router.push('/short_rent?cityId='+city.id)" ><span>{{ city.name }}</span> </a>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import request from '@/utils/request';
import router from "@/router";
//轮播图 -----------------------------------------------------
const bannerArr = ref([]);
const loadBanner = () => {
  let url = `/cr/banner/select`;
  request.get(url).then((response) => {
    if (response.code === 200) {
      // console.log(response.data);
      bannerArr.value = response.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
};
// 租车服务 --------------------------------------------------
const rentType = ref('1')
const rentTypeChange = (val) => {
  rentType.value = val
  // 重新发送ajax请求获取租用类型的车辆列表
  getCarListByRentType()
}
const carList = ref([])
const getCarListByRentType = () => {
  let url = `/vehicle/selectIndexVehicles/${rentType.value}`
  request.get(url).then((response) => {
    if (response.code === 200) {
      carList.value = response.data
    } else {
      ElMessage.error(response.data.msg)
    }
  })
}

// 租车专题 --------------------------------------------------
const topicList = ref([]);

const getTopicList = () => {
  let url = `/topics`;
  request.get(url).then((response) => {
    if (response.code === 200) {
      // console.log(response.data);
      topicList.value = response.data.list.slice(0, 4);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
};

// 热租品牌 --------------------------------------------------
const brandArr = ref([]);
const loadBrand = () => {
  let url = `/cr/brand/selectHot`;
  request.get(url).then((response) => {
    if (response.code === 200) {
      // console.log(response.data);
      brandArr.value = response.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
};
const toShortRent = (id) => {
  router.push({
    path: '/short_rent',
    query: {brandId: id}
  })
}


// 热租城市 --------------------------------------------------
const cityList = ref([]);
const getHotBrand = () => {
  let url = `/city/selectHotCityList`;
  request.get(url).then((response) => {
    if (response.code === 200) {
      cityList.value = response.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

const LetterCityList = ref([]);
const getHotCity = () => {
  let url = `/city/selectLetterCityList`;
  request.get(url).then((response) => {
    if (response.code === 200) {
      LetterCityList.value = response.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

const cityArr = ref([]);
const myclick = (val) => {
  cityArr.value = val;
}


// 凹凸资讯 --------------------------------------------------
const newList = ref([]);
const getNewList = () => {
  let url = `/v1/news/latestNews`;
  request.get(url).then((response) => {
    if (response.code === 200) {
      // console.log(response.data);
      newList.value = response.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
};

onMounted(() => {
  getCarListByRentType();
  getNewList();
  getTopicList();
  loadBanner();
  loadBrand();
  getHotBrand();
  getHotCity();
})

</script>

<style scoped>
.bjx-main {
  min-width: 1024px;
}

.scale {
  transition: all 0.5s;
}

.scale:hover {
  transform: scale(1.05);
}

.s_class {
  font-size: 32px;
  color: #3c3c5a;

}

.zc-button {
  width: 120px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  border-radius: 24px;
  background: #fff;
  color: #3c3c5a;
}

.zc-button:hover {
  opacity: .75;
}

.zc-button.active {
  background-color: #00cf97;
  color: #fff;
}

.zc-card {
  position: relative;
  width: 330px;
  height: 328px;
  background-color: #fff;
  border-radius: 10px;
  padding: 24px;
  overflow: hidden;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  cursor: pointer;
}

.zc-price {
  font-size: 20px;
  line-height: 30px;
  color: #ff5c5c;
  font-weight: 700;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.zc-picture {
  width: 284px;
  height: 168px;
  position: relative;
  margin-bottom: 10px
}


.hot-row {
  width: 157px;
  height: 157px;
  margin: 0 8px 16px;
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
  position: relative;
  background-color: #f5f5f5;
  cursor: pointer;
}

.zt {
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  position: absolute;
  bottom: 0;
  text-align: center;
  z-index: 9;
  left: 0;
  width: 100%;
}

.zc-zt {
  height: 100px;
  text-align: left;
  font-size: 12px;
  line-height: 17px;
  padding: 0 16px;
  color: rgba(60, 60, 90, .6);
  float: left;
}

.zc-more {
  font-size: 16px;
  line-height: 24px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 36px 0;
  color: #00cf97;
  font-weight: 700;
  text-decoration: none;
}

.button {
  width: 40px;
  height: 40px;
  margin-left: 10px;
}

.hot-city {
  text-decoration: none;
  display: block;
  background: #fff;
  border-radius: 24px;
  height: 48px;
  color: #3c3c5a;
  padding: 0 30px;
  line-height: 48px;
  font-size: 15px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.hot-city:hover {
  opacity: .75;
}

</style>
